<template>
	<div>
		<!--新增按钮-->
		<div class="add_btn_wrap">
			<el-button @click="addBtn" type="primary" icon="document">新增黑名单</el-button>
		</div>
		<!-- 内容 -->
		<div class="">
			<el-table :data="data.received.table" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%">
				<!-- 表格主体 -->
				<template v-for="i in config.table.show.items.length">
					<el-table-column :sortable="config.table.sort[config.table.show.prop[i-1]]" :label="config.table.show.items[i-1]" :prop="config.table.show.prop[i-1]" :width="config.table.show.width[i-1]"></el-table-column>
				</template>
				<el-table-column label="操作" v-if="config.table.operate" :width="config.table.operate.width">
					<template slot-scope="scope">
						<el-button @click="deleteBtn(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页-->
		<div class="page_wrap">
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		<!-- 新增弹窗 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible" center width="400px">
			<el-form ref="addForm" :model="Add.data.form" :rules="Add.config.rules" label-width="120px">
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框类型-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
					<el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>
				<!-- 多文本输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.textarea">
					<el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" type="textarea" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="commitAdd('addForm')" style="width: 200px;">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import searchModel from 'components/Common/search-model.vue'
	import tableModel from 'components/Common/table-model.vue'
	import pageModel from 'components/Common/page-model.vue'

	export default {
		components: {
			searchModel,
			tableModel,
			pageModel,
		},
		data() {
			return {
				sendCode: {
					dialogFormVisible: false,
					form: {
						name: 'slsl'
					}
				},
				Add: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							name: '',
							mobile: '',
							mark: '',
						},
						selectData: {
							express_company: [{
								label: '圆通快递',
								value: 1
							}, {
								label: '韵达快递',
								value: 2
							}],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '新增黑名单',
						form: {
							input: [{
									prop: 'name',
									label: '姓名',
									placeholder: '请输入姓名',
								},
								{
									prop: 'mobile',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							textarea: [{
								prop: 'mark',
								label: '原因',
								placeholder: '请输入原因',
							}]
						},
						rules: {
							name: [{
								required: true,
								message: '请输入姓名'
							}],
							mobile: [{
								required: true,
								message: '请输入手机号'
							}, {
								min: 6,
								max: 13,
								message: '长度在 6 到 13个字符',
								trigger: 'blur'
							}],
							mark: [{
								required: true,
								message: '请输入原因'
							}],
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							express_number: '',
							pickup_code: '',
							iphone: '',
							express_company: '',
						},
						selectData: {
							express_company: [{
								label: '圆通快递',
								value: 1
							}, {
								label: '韵达快递',
								value: 2
							}]
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '修改包裹',
						form: {
							input: [{
									prop: 'express_number',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickup_code',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'iphone',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '快递公司',
								prop: 'express_company',
								placeholder: '请选择快递公司',
							}]
						},
						rules: {

						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/List',
					search: {
						search_input: [],
						search_select: []
					},
					table: {
						noGroup: false,
						checkbox: false,
						status: false,
						photo: true,
						sort: {
							CreateDate: 'custom'
						},
						show: {
							prop: [
								'name',
								'mobile',
								'mark'
							],
							items: [
								'黑名单用户',
								'手机号',
								'原因'
							],
							width: []
						},
						operate: {
							deleteBtn: true,
						}
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					},
					excel: {
						fileName: '商户列表',
						tHeader: [
							'商户ID',
							'分类',
							'商户名称',
							'经营者姓名',
							'电话',
							'营业时间',
							'地址',
							'商户类型',
							'创建日期',
							'审核状态',
						],
						filterVal: [
							'id',
							'company_sort_name',
							'name',
							'user_name',
							'contact_number',
							'start_time',
							'address',
							'type',
							'add_time',
							'status',
						],
					},
				},
				data: {
					received: {
						table: [],
						count: 10,
						search: {
							Enabled: [{
									label: '可用',
									value: '1'
								},
								{
									label: '冻结',
									value: '0'
								}
							]
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
						},
						multipleSelection: [],
						isDelete: 0,
						date: {
							time: '',
						}
					}
				}
			}
		},
		created() {
			this.tableData();
		},
		methods: {
			tableData() {
				let obj = this.data.exchanged.search;
				let page = obj.page - 1;
				this.apiGet("/api/backend/site/customer-black/list?page=" + page + "&count=" + obj.limit)
					.then(res => {
						this.data.received.table = res.data.customers
						this.data.received.count = res.data.count
						_g.closeGlobalLoading();
					})
			},
			addBtn() {
				this.Add.dialogFormVisible = true;
			},
			commitAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let that = this;
						that.apiPost("/api/backend/site/customer-black/add", that.Add.data.form).then(res => {
							if(res.code == 200) {
								that.$message({
									type: 'success',
									message: '添加成功！'
								})
								this.Add.dialogFormVisible = false;
								that.tableData()
							}
						})
					}
				});
			},
			deleteBtn(row) {
				let that = this;
				that.apiPost("/api/backend/site/customer-black/remove", {
					customerId: row.customerId
				}).then(res => {
					if(res.code == 200) {
						that.$message({
							type: 'success',
							message: '删除成功！'
						})
						that.tableData()
					}
				})
			},
		},

		mixins: [http]
	}
</script>
<style scoped>
	.add_btn_wrap {
		background: rgba(250, 250, 250, 1);
		padding: 10px 30px;
		text-align: right;
	}
	
	.page_wrap {
		text-align: center;
		padding: 30px;
	}
</style>